import React from 'react'
import { WingBlank, WhiteSpace, NavBar, Button, Icon, List, InputItem,Toast } from 'antd-mobile'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'

import { login } from '../../redux/actions'
import Logo from '../../component/logo/logo'


class Login extends React.Component {

    componentDidMount() {

    }

    back = () => {
        this.props.history.goBack()
    }

    toRegister = () => {
        this.props.history.push("/register")
    }

    login = () => {
        var {userName,password}=this.state;
        if(userName && password){
            this.props.login({userName,password})
        }else{
            return Toast.fail('请填写账号和密码', 1);
        }

    }

    handleChange = (field,value) => {
        this.setState({
            [field]: value
        })
    }

    render() {
        var {id,errorMessage}=this.props.user
        if(id){
            //登陆后重定向
            return <Redirect to="/"/>
        }
        return (
            <div>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" onClick={this.back} />}
                    onLeftClick={this.onOpenChange}
                >注册</NavBar>
                <WingBlank>
                    <Logo />
                    <div className="error-holder">{errorMessage}</div>
                    <List>
                        <InputItem clear placeholder='请输入账号' onChange={(value)=>this.handleChange("userName",value)}>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</InputItem> <WhiteSpace />
                        <InputItem type='password' clear placeholder='请输入密码'  onChange={(value)=>this.handleChange("password",value)}>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</InputItem><WhiteSpace />
                        <Button type="primary" onClick={this.login}>登陆</Button><WhiteSpace />
                        <Button onClick={this.toRegister}>没有账号，去注册</Button>
                    </List>
                </WingBlank>

            </div>

        )
    }

}

export default connect(state => ({ user: state.user }),{login})(Login)